<template>
  <div class="login-register">
    <a-form :form="form" @submit="handleSubmit" class='login-form'>
      <a-form-item>
        <a-input
          placeholder='请输入用户名'
          v-decorator="[
            'userName',
            { rules: [{ required: true, message: '请输入用户名' }] }
          ]"
        >
          <a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
            'password',
            {
              rules: [{
                required: true, message: '请输入密码'
                },{ 
                  validator: validateToNextPassword,
              }]
             }
          ]"
          type='password'
          placeholder='请输入密码'
        >
          <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item
        v-if="toggleVal === 'login'"
        extra="看不清，点击更换验证码"
      >
        <a-row :gutter="8">
          <a-col :span="14">
            <a-input
              placeholder="请输入验证码"
              v-decorator="[
                'captcha',
                {rules: [{ required: true, message: '请填写验证码' }]}
              ]"
            />
          </a-col>
          <a-col :span="6">
            <img @click="getCaptcha()" :src="captchaUrl" alt="验证码png" class="captcha-img" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-if="toggleVal === 'register'">
        <a-input
          placeholder='请输入确认密码'
          v-decorator="[
            'confirm',
            {
              rules: [{
                required: true, message: '请输入确认密码',
              }, {
                validator: compareToFirstPassword,
              }],
            }
          ]"
          type='password'
        >
          <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' htmlType='submit' class='login-form-button'>
          {{ toggleVal | renderBtnText }}
        </a-button>
        <div>
          <a href='javaScript: void(0);' @click="toggleVal = 'login'" v-if="toggleVal === 'register'">去登录</a>
          <a href='javaScript: void(0);' @click="toggleVal = 'register'" v-if="toggleVal === 'login'">去注册</a>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import md5 from 'md5'
  export default {
    data () {
      return {
        toggleVal: 'login',
        captchaUrl: ''
      }
    },
    methods: {
      validateToNextPassword (rule, value, callback) {
        const form = this.form;
        if (value && form.getFieldValue('confirm')) {
          form.validateFields(['confirm'], { force: true });
        }
        callback();
      },
      compareToFirstPassword  (rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次密码输入不一致！');
          return false
        }
        callback();
      },
      async requestFun (url, values) {
        values.password = md5(values.password)
        const res = await this.$http.post(url, values)
        if (res.code === 200) {
          this.$message.success(res.message)
          this.$router.push({ name: 'home' })
        } else {
          this.$message.warn(res.message)
        }
      },
      handleSubmit (e) {
        e.preventDefault();
        this.form.validateFields(async (err, values) => {
          if (!err) {
            if (this.toggleVal === 'login') {
              // 登录
              this.requestFun('/user/login', values)
            } else {
              // 注册
              this.requestFun('/user/register', values)
            }
          }
        })
      },
      async getCaptcha () {
        const res = await this.$http.get('/user/captcha')
        const { code, message } = res
        if (code === 200) {
          this.captchaUrl = message
        } else {
          this.$message.warn(message)
        }
      }
    },
    filters: {
      renderBtnText (value) {
         return value === 'register' ? '注册' : '登录'
      }
    },
     beforeCreate () {
      this.form = this.$form.createForm(this);
    },
    created () {
      this.getCaptcha()
    }
  }
</script>

<style scoped lang="less">
  .login-register {
    .login-form {
      margin: 100px auto;
      max-width: 300px;
      .captcha-img {
        height: 32px;
      }
    }
  }
</style>